<template>
	<view>
		<view style="width:100%">
			<block v-for="(item,index) in liveList" :key='index'>
				<view class="anchorInfo" @tap="toLive" :data-index='index'>
					<view class="liveImgs">
						<image class="statusIcon"
							:src="item.live_status==101?'/static/images/liveIcon.png':item.live_status==102?'/static/images/beforeLive.png':'/static/images/reLive.png'">
						</image>
						<image class="livePic" mode="aspectFill" :src="item.cover_img"></image>
					</view>
					<!-- 直播信息 -->
					<view class="liveRoom">
						<text class="roomTitle">{{item.name}}</text>
						<view style="padding-top:18rpx">
							<image class="anchorImg" mode="aspectFill" :src="item.share_img"></image>
							<text class="anchorName">{{item.anchor_name}}</text>
						</view>
					</view>
				</view>
			</block>
		</view>
		<view class='loading'>
			<text>已加载全部</text>
		</view>
	</view>
</template>

<script>
	var app = getApp().globalData;
	export default {
		data() {
			return {
				liveList: []
			}
		},
		methods: {
			getLive() {
				var that = this;
				app.sendRequest({
					url: "/ProgramLive/getLiveRoomList",
					data: {},
					success: res => {
						if (res.status == 1) {
							that.setData({
								liveList: res.data,
							})
						}
					}
				})
			},
			toLive(e) {
				var index = parseInt(e.currentTarget.dataset.index);
				let roomId = this.liveList[index].roomid; // 填写具体的房间号，可通过下面【获取直播房间列表】 API 获取
				let customParams = encodeURIComponent(JSON.stringify({
					path: 'pages/index/index',
					pid: 1
				})); // 开发者在直播间页面路径上携带自定义参数（如示例中的path和pid参数），后续可以在分享卡片链接和跳转至商详页时获取
				uni.navigateTo({
					url: 'plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=' + roomId +
						'&custom_params=' + customParams
				})
			},
		},
		async onLoad() {
			await this.$onLaunched;
			this.getLive()
		},

		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function() {

		},

		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {

		},

		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {

		}
	}
</script>

<style>
	page {
		background: #f6f6f6;
		padding: 20rpx;
		box-sizing: border-box;
	}

	.anchorInfo {
		display: inline-block;
		width: 47%;
		height: 580rpx;
		padding: 8rpx;
	}

	.liveImgs {
		position: relative;
		width: 100%;
		height: 420rpx;
	}

	.statusIcon {
		position: absolute;
		left: 8rpx;
		top: 8rpx;
		width: 70rpx;
		height: 36rpx;
		z-index: 1;
	}

	.liveRoom {
		padding: 15rpx;
	}

	.roomTitle {
		font-size: 30rpx;
		color: #333;
	}

	.anchorImg {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		margin-bottom: 5rpx;
		margin-right: 15rpx;
		background-color: #666;
		vertical-align: middle;
	}

	.anchorName {
		font-size: 24rpx;
		color: #333;
	}

	.livePic {
		width: 100%;
		height: 420rpx;
	}

	.bottom {
		font-size: 24rpx;
		color: #888;
		width: 100%;
	}
</style>
